<template>
    <div id="regist">
      <el-card>
           <div slot="header">
               <img src="/static/logo.png" alt="">
               问卷系统注册
           </div>
           <el-form ref="formLogin" :model="formLogin" label-width="80px" label-position="left" :rules="rules" status-icon>
               <el-form-item label="用户名" prop="username">
                   <el-input v-model="formLogin.username"></el-input>
               </el-form-item>
                <el-form-item label="密码" prop="password">
                   <el-input v-model="formLogin.password" type="password"></el-input>
               </el-form-item>
                <el-form-item label="确认密码" prop="confirmpsw">
                   <el-input v-model="formLogin.confirmpsw" type="password"></el-input>
               </el-form-item>
                <el-form-item label="手机" prop="phone">
                   <el-input v-model="formLogin.phone"></el-input>
               </el-form-item>
               <el-form-item label="邮箱" prop="email">
                   <el-input v-model="formLogin.email"></el-input>
               </el-form-item>
               <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="formLogin.gender">
                        <el-radio label="m">男</el-radio>
                        <el-radio label="f">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">立即注册</el-button>
                    <router-link to="/login">已有账号  去登陆</router-link>
                </el-form-item>
           </el-form>
       </el-card>
    </div>
</template>
<script>
// import { mapState, mapMutations } from "Vuex";
export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.formLogin.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      rules: {
        username: [
          { required: true, message: "请输入正确的用户名", trigger: blur },
          { min: 4, max: 18, message: "长度在 4 到 18 个之间", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入正确的密码", trigger: blur },
          { min: 6, max: 18, message: "长度在 6 到 18 个之间", trigger: "blur" }
        ],
        confirmpsw: [{ validator: validatePass2, trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: blur },
          {
            pattern: /^1[3,5,8][1,3,5,8,7,9]\d{8}$/,
            message: "请填写正确的手机号",
            trigger: blur
          }
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: blur },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }]
      },
      formLogin: {
        username: "",
        password: "",
        confirmpsw: "",
        phone: "",
        email: "",
        gender: ""
      }
    };
  },
  methods: {
    //   regist(){
    //        this.axios.get('/users',this.formLogin).then((res)=>{
    //             if(this.formLogin.phone==res.data.phone){
    //                 alert('该手机号已经被注册')
    //             }
    //         })
    //   },
    //点击登录后的数据设置
    login() {
      this.$refs.formLogin.validate(pass => {
        if (pass == true) {
          this.axios.post("/users/regist",this.formLogin).then((res) => {
              this.$message({
                type: "success",
                message: "注册成功",
              });
               this.$router.push("/login");
          }).catch(() => {
               this.$message.error("注册失败");
          });
        }
      });
    }
  }
};
</script>
<style>
#regist {
  width: 600px;
  margin: 0 auto;
  margin-top: 60px;
}
</style>
